<template>
    <view class="  ">
        <z-paging
            ref="paging"
            v-model="dataList"
            @query="queryList">
            <template #top>
                <tn-navbar>通道管理</tn-navbar>
                <tn-input
                    v-model="inputValue"
                    placeholder="请输入通道名称">
                    <template #suffix>
                        <view
                            class="tn-ml tn-mr"
                            @click="filterData"
                            ><tn-icon
                                name="search"
                                color=" tn-gray_bg"></tn-icon
                        ></view>
                    </template>
                </tn-input>
            </template>
            <view class="tn-p tn-bg-card">
                <view
                    v-for="(item, index) in dataList"
                    :key="index"
                    class="tn-shadow-md tn-p tn-mb tn-radius tn-white_bg">
                    <view class="tn-flex justify-between justify-start tn-mb-sm items-center">
                        <view>
                            <tn-button
                                type="primary"
                                shape="circle"
                                >{{ item.name[0] }}</tn-button
                            >
                            <text class="tn-text-xl tn-text-bold tn-ml-sm">{{ item.name }}</text>
                        </view>
                        <text class="tn-grey_text">192.168.1.1</text>
                    </view>
                    <view class="tn-pt tn-pl-0 tn-pr-0 tn-ml-0 tn-mr-0 tn-text-sm">
                        <view class="tn-flex justify-between tn-mb-sm">
                            <text> 主相机SN： </text>
                            <text>CHE202120OGHL000012</text>
                        </view>
                        <view class="tn-flex justify-between tn-mb-sm tn-grey_text">
                            <text> 控制卡类型： </text>
                            <text>方控</text>
                        </view>
                    </view>
                    <view class="tn-flex tn-flex-wrap tn-mt-sm">
                        <view class="tn-flex justify-between">
                            <view class="tn-m-xs">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    border
                                    border-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="cfsheep.$router.go('/pages/main/parkingLot/channelPermission', { id: item.id })">
                                    <tn-icon
                                        name="coupon"
                                        size="30"
                                        color="tn-blue"></tn-icon>
                                    权限
                                </tn-button>
                            </view>
                            <view class="tn-m-xs">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="cfsheep.$router.go('/pages/main/parkingLot/channelScreenCoice', { id: item.id })">
                                    <tn-icon
                                        name="payment-wechat"
                                        size="30"
                                        color="tn-teal-dark"></tn-icon>
                                    屏显
                                </tn-button>
                            </view>
                            <view class="tn-m-xs">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="openVoiceForm(item.name, item.id)">
                                    <tn-icon
                                        name="refund"
                                        size="30"
                                        color="tn-orange"></tn-icon>
                                    音量
                                </tn-button>
                            </view>
                            <view class="tn-m-xs">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="openVideoForm(item.name, item.id)">
                                    <tn-icon
                                        name="refund"
                                        size="30"
                                        color="tn-orange"></tn-icon>
                                    视频
                                </tn-button>
                            </view>
                        </view>
                        <view class="tn-flex justify-around">
                            <view class="tn-m-xs">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="openWhiteListForm(item.name,item.id)">
                                    <tn-icon
                                        name="my-lack"
                                        size="30"
                                        color="tn-orange"></tn-icon>
                                    白名单
                                </tn-button>
                            </view>

                            <view class="tn-m-xs">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="openForm('update', item.id)">
                                    <tn-icon
                                        name="edit-write-fill"
                                        size="30"></tn-icon>
                                    编辑
                                </tn-button>
                            </view>
                            <view class="tn-m-xs">
                                <tn-button
                                    :shadow="true"
                                    shadow-color="tn-grey"
                                    bg-color="tn-white"
                                    @click="handleDelete(item.id)">
                                    <tn-icon
                                        name="delete"
                                        size="30"
                                        color="tn-red"></tn-icon>
                                    删除
                                </tn-button>
                            </view>
                        </view>
                    </view>
                </view>
            </view>

            <template #loadingMoreNoMore></template>
        </z-paging>
    </view>
    <view>
        <!-- 悬浮按钮 -->
        <tn-suspend-button
            icon="add"
            size="sm"
            text-color="tn-white"
            bg-color="tn-gradient-bg__cool-5"
            @click="openForm('create')" />

        <!-- 删除弹框 -->
        <tn-modal ref="modalRef" />
        <ChannelModal ref="channelModalRef" />
        <ChannelVideoModal ref="channelVideoModalRef" />
        <ChannelVoiceModal ref="channelVoiceModalRef" />
        <ChannelWhiteListModal ref="channelWhiteListModalRef" />
    </view>
</template>

<script setup lang="ts">
    import { onMounted, ref } from "vue";
    import TnSuspendButton from "tnuiv3p-tn-suspend-button/index.vue"; 
    import cfsheep from "@/cfsheep";
    import type { TnModalInstance } from "@/uni_modules/tuniaoui-vue3";
    import ChannelModal from "./modal/channel/ChannelModal.vue";
    import ChannelVoiceModal from "./modal/channel/ChannelVoiceModal.vue";
    import ChannelVideoModal from "./modal/channel/ChannelVideoModal.vue";
    import ChannelWhiteListModal from "./modal/channel/ChannelWhiteListModal.vue";

    // ===============模拟数据 =========================
    const inputValue = ref();
    const filterData = () => {};
    // 模拟数据
    const tempList = ref([]);

    // z-paging 示例
    const paging = ref(null);
    // 数据列表
    const dataList = ref();

    const queryList = (pageNo, pageSize) => {
        // 模拟数据

        for (let i = 0; i < 10; i++) {
            tempList.value.push({
                id: i,
                name: "通道口" + i,
                type: "停车金额减免",
                duration: { value: 3, unit: "小时" },
                amount: "3小时",
                price: 2,
            });
        }
        paging.value.complete(tempList.value);
    };

    // ===========================================

    /** 添加/修改操作 */
    const channelModalRef = ref();
    const openForm = (title: string, id?: number) => {
        channelModalRef.value.open(title, id);
    };
    /** 音量操作*/
    const channelVoiceModalRef = ref();
    const openVoiceForm = (title: string, id?: number) => {
        channelVoiceModalRef.value.open(title, id);
    };

    /** 视频操作*/
    const channelVideoModalRef = ref();
    const openVideoForm = (title: string, id?: number) => {
        console.log(channelVideoModalRef.value);
        channelVideoModalRef.value.open(title, id);
    };

    /** 白名单操作*/
    const channelWhiteListModalRef = ref();
    const openWhiteListForm = (title: string, id?: number) => {
        console.log(channelWhiteListModalRef.value);
        channelWhiteListModalRef.value.open(title, id);
    };
    //删除ref
    const modalRef = ref<TnModalInstance>();

    /** 删除按钮操作 */
    const handleDelete = async (id: number) => {
        modalRef.value?.showModal({
            title: "提示",
            content: "是否删除通道",
            confirmText: "确定",
            cancelText: "取消",
            showCancel: true,
            cancel: () => {
                return true;
            },
            confirm: () => {
                deleteData(id);
            },
        });
    };

    // 删除逻辑
    const deleteData = (id: number) => {
        // 逻辑删除
        // 刷新列表
        paging.value.reload(true);
    }; 
</script>
<style lang="scss" scoped>
    
</style>
